<template>
  <div class="wrapper">
    <table v-if="rightsLook.memberCard">
      <tr class="style">
        <th>
          会员权益/会员卡
        </th>
        <th v-for="item in rightsLook.memberCard"
          :key="item.classId">
          <p>{{item.name}}</p>
          <img :src="item.imgMin"
            alt=""
            width="100"
            height="80"
            style="margin-top:5px"
            @click="viewImg(item.imgMin)">
        </th>
      </tr>
      <tr v-for="(item,index) in rightsPull"
        v-if="item.length"
        :key="index">
        <td>
          {{renderName(item[0].type)}}
        </td>
        <td v-for="(i,s) in rightsLook.memberCard"
          style="padding:10px"
          :key="i.classId">
          <el-select v-model="rightsLook[index][s]"
            clearable
            size="small"
            :multiple="item[0].type==6">
            <el-option v-for="ii in item"
              :key="ii.id"
              :value="ii.id+''"
              :label="ii.rightsName">
            </el-option>
          </el-select>
        </td>
      </tr>
    </table>
    <p v-if="!rightsLook.memberCard">暂无数据</p>
    <el-dialog :visible.sync="dialogImg"
      width="340px">
      <img :src="imgUrl"
        alt=""
        width="300">
    </el-dialog>
    <InfomationBtns>
      <el-button type="primary"
        size="small"
        @click="back">返回</el-button>
      <el-button type="primary" v-has="'memberclassrights'"
        size="small"
        v-if="rightsLook.memberCard"
        @click="sure">保存</el-button>
    </InfomationBtns>
  </div>
</template>

<script>
import {
  getMemberEquity,
  memberEquityPull,
  updateMemberEquity
} from "@/public/js/member";
import InfomationBtns from "@/components/common/InfomationBtns";
export default {
  components: {
    InfomationBtns
  },
  props: ["toggleFn"],
  data() {
    return {
      rightsLook: {memberCard:[]},
      value: 1,
      rightsPull: [],
      dialogImg: false,
      imgUrl: "",
      result: []
    };
  },
  watch: {
    rightsLook: {
      handler: function(val, oldval) {
        let arr = [];
        Object.keys(val).forEach((key, i) => {
          if (key != "memberCard") {
            arr.push(val[key]);
          }
        });
        this.renderArray(arr);
      },
      deep: true //对象内部的属性监听，也叫深度监听
    }
  },
  computed: {},
  methods: {
    //合并数据
    renderArray(arr, i) {
      this.result = [];
      arr.forEach(item => {
        item.forEach((d, i) => {
          let a = (this.result[i] = this.result[i] || []);
          if (d) {
            a.push(d);
          }
        });
      });

      this.result.forEach(item => {
        item.forEach((ii, index) => {
          if (typeof ii == "string") {
            item[index] = {
              id: ii
            };
          } else {
            item[index] = {
              ids: ii
            };
          }
        });
      });
    },
    //获取会员权益下拉数据
    _memberEquityPull() {
      memberEquityPull().then(res => {
        this.rightsPull = res.data.rightsPull;
      });
    },
    _getMemberEquity() {
      getMemberEquity().then(res => {
        this.rightsLook = res.data.rightsLook?res.data.rightsLook:{};
      });
    },
    renderName(type) {
      switch (type) {
        case 1:
          return "房价";
          break;
        case 2:
          return "预留房间";
          break;
        case 3:
          return "延迟退房";
          break;
        case 4:
          return "免押金";
          break;
        case 5:
          return "免查房";
          break;
        case 6:
          return "自定义";
          break;
        default:
          return "";
      }
    },
    //预览图片
    viewImg(img) {
      this.imgUrl = img;
      this.dialogImg = true;
    },
    //保存
    sure() {
      let rightsSets = [];
      this.rightsLook.memberCard.forEach((item, index) => {
        rightsSets.push({
          classId: item.classId,
          rightsId: this.result[index]
        });
      });
      updateMemberEquity({ rightsSets }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          this.toggleFn();
        }
      });
    },
    // 返回
    back() {
      this.toggleFn();
    }
  },
  created() {
    this._getMemberEquity();
    this._memberEquityPull();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  overflow-x: auto;
  table {
    border-collapse: collapse;
    text-align: center;
    width: 1500px;
  }
  tr {
    .require {
      color: red;
      font-size: 16px;
      display: inline-block;
      line-height: 16px;
    }
  }
  tr.style {
    background: #f2f2f2;
  }
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    width: 200px;
    padding: 0 5px;
    font-size: 12px;
    height: 40px;

    &.style {
      background: #f2f2f2;
    }
  }
  .el-select .el-tag {
    display: block;
  }
}
</style>